小白網頁設計練成記-DAY6-延續前話HTML5 中的 b / strong，i / em 有什么区别？

2022 iThome 鐵人賽

DAY 6

自我挑戰組

小白網頁設計練成記系列第 6 篇

14th鐵人賽 html 新手上路

Eric

2022-09-06 13:59:00

866 瀏覽

分享至

上次我們有提到 和 同樣都有將字體加粗的效果，同樣 和 也是斜體的視覺效果，所以初次碰到的小白可能都會想，既然效果一樣為甚麼要多此一舉呢?

這就要提到HTML5語義話的特性，在HTML的世界裡，每個標籤都有它特定的語意

和 和 同樣也各自有自己的不同，下面就來介紹這4個標籤的語義。

根據W3c對的定義:元素代表在普通文本中具有不同語態或語氣的一段文本，某種程度上表明一段不同特性的文本，比如一個分類學名稱，一個技術语，一個外語習語，一個音译，一個个想法，或者西方文本中的一艘船名。

#分類學名稱
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>

#術語
<p>The term <i>prose content</i> is defined above.</p>

#外語習語
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

根據 W3C 对 的定义：b 元素代表側重實用目的而不带有任何额外重要性，也不暗示不同語態或語氣的一段文本，比如一段文本摘要中的關鍵詞、一段審查中的產品名稱、文本驅動軟件中的可執行語句或者一篇文章的導語。

#下面的< b >起到突出關鍵詞的作用，但不具備强调重要性的作用
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

#下面的< b >讓被包圍的詞特殊化
<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

#下面的 b 元素標註了文章的導語
<article>
  <h2>Kittens 'adopted' by pet rabbit</h2>
  <p><b class="lede">Six abandoned kittens have found an
    unexpected new mother figure — a pet rabbit.</b></p>
  <p>Veterinary nurse Melanie Humble took the three-week-old
    kittens to her Aberdeen home.</p>
  ...
</article><em>

根据 W3C 对 的定义：
em 元素代表對其内容的强调，强调位置的不同通常会带来整个句子含義的變化。
看下面舉的例子：

#這是一句不带任何强调的句子
<p>Cats are cute animals.</p>

#< em >包裹 Cats，强調猫是種可愛的動物，而不是狗或者其他動物
<p><em>Cats</em> are cute animals.</p>

#< em >包裹 are，代表句子所說是事實，来反駁那些說猫不可愛的人
<p>Cats <em>are</em> cute animals.</p>

#< em >包裹 cute，强調猫是一種可愛的動物，而不是有人說的刻薄、討厭的動物
<p>Cats are <em>cute</em> animals.</p>

#這裡强調猫是動物，而不是植物
<p>Cats are cute <em>animals</em>.</p>

根據 W3C 对 的定義：代表内容的强烈的重要性、嚴重性或者緊急性。

重要性
 可以被用在標題（heading）、說明（caption）或者段落（paragraph）上，来顯示這部分被包圍的文字的重要性。

#章節序號不重要，章節的名字才重要
<h1>Chapter 1: <strong>The Praxis</strong></h1>

严重性

< strong > 可以被用来標記警告或者警示標誌。
<p><strong>Warning.</strong> This dungeon is dangerous.</p>

紧急性
可以被用来表示需要被盡快看見的部分。
需要注意的是， 元素僅僅对文本内容的重要性、嚴重性或緊急性产生作用，而不像 對句子含義進行改變。

<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
 <li><p><strong>Turn off the oven.</strong></p></li>
 <li><p>Put out the trash.</p></li>
 <li><p>Do the laundry.</p></li>
</ul>

小结

用於對文本内容進行强調，强調位置的不同通常會改變句子的含義。
如果僅僅在語態或語氣上為了突出某一個文本，那應該使用 。
但如果為了突出某一部分的重要性、严重性或紧急性，那应该使用 。
根據 W3C 对元素的说明， 元素應當是在其他標籤都不合適的情况下最後一個考慮使用的標籤。
相同的，在考慮使用 之前，也要想想是否用 、、< dfn > 或 等元素更合適。